:root{
  --bg1:#111; --bg2:#333;
  --card:#1f1f1f; --border:#2c2c2c;
  --text:#fff; --muted:#a8b0b8;
  --accent:#00d1ff; --danger:#ff4d4d;
  --shadow:0 10px 24px rgba(0,0,0,.35);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Trebuchet MS", sans-serif;
  background: linear-gradient(to bottom, var(--bg1), var(--bg2));
  color: var(--text);
  padding: 22px;
  max-width: 1000px;
  margin: auto;
}

header, footer { text-align:center; }
h1{ margin:0 0 6px; }
h2{ margin:0 0 10px; }
.muted{ color: var(--muted); }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  margin:16px 0;
  box-shadow: var(--shadow);
}

.primary, .ghost{
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  border:1px solid var(--border);
}
.primary{ background: var(--accent); color:#00202a; border-color: transparent; }
.primary:hover{ filter:brightness(0.95); }
.ghost{ background: transparent; color:#e6edf3; }
.ghost:hover{ border-color:#555; }
.danger{ border-color: #a33; color:#fff; }
.danger:hover{ border-color:#d55; }

/* Charakter */
.char-hero{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.char-avatar{
  width:72px; height:72px; display:grid; place-items:center; font-size:40px;
  background:#262626; border-radius:16px; border:1px solid var(--border);
}

/* Stats */
.stats-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; margin-top:10px;
}
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-header{ display:flex; justify-content:space-between; font-weight:600; }
.bar{ height:14px; background:#3b3b3b; border-radius:999px; overflow:hidden; border:1px solid #2d2d2d; }
.fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent), #0984ff); transition: width .25s; }
.stats-meta{ display:flex; gap:22px; margin-top:10px; }

/* Add Quest */
.add-quest{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.add-quest input, .add-quest select{
  padding:10px; border-radius:10px; border:1px solid var(--border);
  background:#262626; color:#fff;
}
.add-quest input{ flex:1; min-width:220px; }

/* Questliste */
ul{ list-style:none; padding:0; margin:0; }
.quest-item{
  display:flex; align-items:center; gap:10px;
  background:#262626; border:1px solid var(--border);
  margin:8px 0; padding:10px; border-radius:10px;
}
.quest-item.completed label{ text-decoration: line-through; color:#9aa1a9; }
.quest-item input{ width:18px; height:18px; }
.quest-meta{ margin-left:auto; display:flex; gap:8px; font-size:.9rem; color:#cbd5e1; }
.tag{ padding:2px 8px; border:1px solid #3a3a3a; border-radius:999px; }